<template>
	<div class="battle-game-box-status">
		<div class="battle-round">{{ gameRound }}</div>
		<div class="battle-boxes">
			<div class="battle-box-item" v-for="(box, index) in props.gameBoxes" :key="index">
				<div class="battle-box-item-tag" :class="{ active: index == gameBoxActiveIndex }"></div>
				<img class="battle-box-item-img" :src="processImageUrl(box.img)" />
			</div>
		</div>
		<div class="battle-split"></div>
		<div class="battle-info">
			<div class="battle-info-status" :class="['status' + props.gameStatus]">
				<img class="battle-info-status-icon" :src="`/src/static/img/battle/battle-status-${props.gameStatus}.png`" />
				<div class="battle-info-status-text">{{ renderGameStatus() }}</div>
			</div>
			<div class="battle-info-amount">
				<img class="battle-info-amount-icon" src="@/static/img/battle/createBattle/icon_coin.png" />
				<div class="battle-info-amount-text">{{ props.boxAmount }}</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { processImageUrl } from '@/utils';

export default defineComponent({
	setup(props, { emit }) {
		function renderGameStatus() {
			switch (props.gameStatus) {
				case 0:
					return '未知';
				case 1:
					return '进行中';
				case 2:
					return '已完成';
				case 3:
					return '已取消';
				default:
					return '';
			}
		}

		return {
			props,
			processImageUrl,
			renderGameStatus
		};
	},
	components: {},

	props: {
		gameBoxes: {
			type: Array,
			default: () => []
		},
		gameStatus: {
			type: Number,
			default: () => 0
		},
		boxAmount: {
			type: Number,
			default: () => 0
		},
		gameRound: {
			type: Number,
			default: () => 0
		},
		gameBoxActiveIndex: {
			type: Number,
			default: () => 0
		}
	}
});
</script>

<style scope lang="scss">
@import '@/views/battle/components/CreateBattle/GameBoxStatus.scss';
</style>
